<script setup>

const emits = defineEmits(['edgeControlsClose']);

const props = defineProps({
  edge: {
    type: Object,
    required: true,
  },
})

const {
  getEdges,
} = useVueFlow()

const instance = useVueFlow()
const edge = props.edge.id ? instance.findEdge(props.edge.id) : findEdgeBySelected()
const sourceNode = instance.findNode(edge.source)

function findEdgeBySelected() {
  for (const edge of getEdges.value) {
    if(edge.selected){
      return edge;
    }
  }
  return null;
}

// console.log('findEdgeBySelected()',findEdgeBySelected())

const focused = ref(false);

function handleFocus() {
  focused.value = true;
}

function handleBlur() {
  focused.value = false;
}

watch(edge, val => {
  //路径失去焦点
  if(!val.selected && !focused){
    emits('edgeControlsClose', { })
  }
})

watch(() => props.edge.data.type, (newVal, oldVal) => {
  if(newVal == 'note'){
    return
  }
  if (newVal && newVal != 'common') {
    edge.label = newVal
  }else{
    edge.label = ''
  }
}, { immediate: true }); // immediate: true 选项可以在初次绑定时立即执行一次回调

const edgeAnimated = ref(props.edge.animated || true)
const edgeMarkerEnd = ref(props.edge.markerEnd == 'arrowclosed' ? 'ArrowClosed' : 'Arrow')

watch(edgeAnimated, val => {
  edge.animated = val
})

watch(edgeMarkerEnd, val => {
  if(val == 'Arrow'){
    edge.markerEnd = MarkerType.Arrow
  }else{
    edge.markerEnd = MarkerType.ArrowClosed
  }
})
</script>

<template>
  <div class="edge-controls"
    
  >
    <vs-divider border-style="dashed" position="center" style="font-size: 16px;font-weight: bold;">
      路径属性设置
    </vs-divider>
    <div class="m-2">
      <label class="label">
        <VsInput  
          tabindex="0"
          @focus="handleFocus"
          @blur="handleBlur"
          id="draggable"
          v-model="edge.label"
          color="success" 
          label-float 
          label="路径名称"
        />
      </label>
    </div>
    
    <div class="m-2">
      <span class="edge-mt-5">
        路径类型
        <vs-radio class="edge-mt-5" v-model="edge.data.type" v-if="sourceNode.type != 'note'" value="common"> common(普通路径) </vs-radio>
        <vs-radio class="edge-mt-5" v-if="edge.data.type == 'note'" v-model="edge.data.type" value="note"> 注释 </vs-radio>
        <vs-radio class="edge-mt-5" v-if="sourceNode.type == 'switch' || sourceNode.data.type == 'switch_script'" v-model="edge.data.type" value="to"> to(Switch路径) </vs-radio>
        <vs-radio class="edge-mt-5" v-if="sourceNode.type == 'switch' || sourceNode.data.type == 'switch_script'" v-model="edge.data.type" value="default"> default(Switch路径) </vs-radio>
        <vs-radio class="edge-mt-5" v-if="sourceNode.type == 'if' || sourceNode.type == 'while' || sourceNode.type == 'break' || sourceNode.type == 'router'" v-model="edge.data.type" value="boolean"> boolean(Boolean路径) </vs-radio>
        <vs-radio class="edge-mt-5" v-if="sourceNode.type == 'if' || sourceNode.data.type == 'if_script'" v-model="edge.data.type" value="true"> true(If路径) </vs-radio>
        <vs-radio class="edge-mt-5" v-if="sourceNode.type == 'if' || sourceNode.data.type == 'if_script'" v-model="edge.data.type" value="false"> false(If路径) </vs-radio>
        <vs-radio class="edge-mt-5" v-if="sourceNode.type == 'while' || sourceNode.type == 'for' || sourceNode.type == 'iterator' || sourceNode.data.type == 'while_script' || sourceNode.data.type == 'for_script' || sourceNode.data.type == 'iterator_script'" v-model="edge.data.type" value="do"> do路径 </vs-radio>
        <vs-radio class="edge-mt-5" v-if="sourceNode.type == 'while' || sourceNode.type == 'for' || sourceNode.type == 'iterator' || sourceNode.data.type == 'while_script' || sourceNode.data.type == 'for_script' || sourceNode.data.type == 'iterator_script'" v-model="edge.data.type" value="break"> break路径 </vs-radio>
      </span>

      <VsInput  
        v-if="edge.data.type == 'to'"
        v-model="edge.data.id"
        color="success" 
        label-float 
        label="表达式ID"
      />

      <VsInput  
        v-if="edge.data.type == 'to'"
        v-model="edge.data.tag"
        color="success" 
        label-float 
        label="标签"
      />
    </div>

    <vs-divider border-style="dashed" position="center" style="font-size: 16px;font-weight: bold;">
      路径样式设置
    </vs-divider>
    <div class="m-2">
      <span>
        <vs-select v-model="edge.type" label="路径样式" label-float>
          <vs-option label="animation(默认路径)" value="animation"> animation(默认路径) </vs-option>
          <vs-option label="Bezier(贝塞尔曲线)" value="default"> Bezier(贝塞尔曲线) </vs-option>
          <vs-option label="Step(直角)" value="step"> Step(直角) </vs-option>
          <vs-option label="SmoothStep(圆角)" value="smoothstep"> SmoothStep(圆角) </vs-option>
          <vs-option label="Straight(直线)" value="straight"> Straight(直线) </vs-option>
        </vs-select>
      </span>
    </div>
    
    <div class="m-2">
      <label class="label open-path-animated">
        <VsCheckbox v-model="edgeAnimated">
          开启路径动画
        </VsCheckbox>
      </label>
    </div>
    
    <div class="m-2">
      <span>
        <VsRadio
          class="edge-marker"
          v-model="edgeMarkerEnd"
          value="ArrowClosed"
          style="margin-inline-end: 8px;"
        >
        路径箭头关闭
        </VsRadio>
        <VsRadio
          v-model="edgeMarkerEnd"
          value="Arrow"
        >
          路径箭头
        </VsRadio>
      </span>
    </div>
  </div>
</template>

<style>
.edge-marker{
  float: inline-start;
}

.edge-controls{
  position:absolute;
  z-index:4;
  padding:8px;
  border: 1px solid #ddd;
  background-color:#fff;
  border-end-start-radius:10px;
  font-size:11px;
  inset-block-start: 15px;
  inset-inline-end: 48px;
}

.edge-controls .label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  gap:5px
}

.edge-controls .label input{
  cursor:pointer
}

.open-path-animated .con-vs-checkbox{
  margin: 0 !important;
}

.edge-mt-5{
  margin-block-start: 5px;
}
</style>
